<script setup lang="ts">
import { ref } from 'vue';
import useStore from '@/store';
import { ElMessage } from 'element-plus';
const { partnerLists } = useStore();

const accountType = ref('wechat'); // 下拉选中的值，默认查询微信号
const input = ref(''); // 输入框的值
const placeholder = ref('输入需要查询的微信号'); // 输入框提示
const accountList = partnerLists.partnerListsPc;
let isEnd = ref(false); // button的loading值，搜的时候为true不让再次搜索，搜索完之后才能再次点击
// 查询逻辑
const findEvent = () => {
  isEnd.value = true;
  let isMartek = false;
  const inputValue = input.value;
  if (!inputValue) {
    ElMessage({
      message: '输入框不能为空！',
      type: 'warning',
    })
    isEnd.value = false;
    return;
  }
  accountList.map(item => {
    if (item.code === accountType.value) {
      for (let i = 0; i < item.list.length; i++) {
        if (item.list[i].account === inputValue) {
          ElMessage({
            message: '合伙人名字是' + item.list[i].username,
            type: 'success',
          })
          isEnd.value = false;
          isMartek = false;
          return;
        } else {
          isMartek = true;
        }

      }
    }
  })

  if (isMartek) {
    ElMessage({
      message: '该账号不是合伙人',
      type: 'error',
    });
    isEnd.value = false;
    return;
  }
}

// 改变输入框的提示
const chageType = (val) => {
  if (val === 'wechat') {
    placeholder.value = '输入需要查询的微信号';
  } else {
    placeholder.value = '输入需要查询的小红书账号';
  }
}



</script>


<template>
  <div class="container">
    <div class="content">
      <!-- 图片 -->
      <div class="img">
        <img src="../../assets/images/background.jpg" alt="">
      </div>
      <!-- 标题 -->
      <div class="title">
        <span>合伙人防伪查询系统</span>
      </div>
      <!-- 输入框 -->
      <div class="flex">
        <el-select v-model="accountType" class="m-2" placeholder="请选择" size="large" @change="chageType">
          <el-option v-for="item in accountList" :key="item.code" :label="item.label" :value="item.code" />
        </el-select>

        <el-input v-model.trim="input" size="large" class="" :placeholder="placeholder" @keyup.enter="findEvent" clearable/>

        <el-button type="primary" @click="findEvent" size="large" :loading="isEnd">查询</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: white;
  font-size: 24px;
  display: flex;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.img {
  img {
    width: 18rem;
    height: 18rem;
  }
}

.title {
  margin-bottom: 2.5rem;
  background-color: red;
  display: block;
  height: 1.5rem;
  width: 10rem;
  text-align: center;
  line-height: 1.5rem;
  font-size: .8rem;

  span {
    color: white;

  }
}

.flex {
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: center;

  .el-button {
    margin-left: 5px;
  }

  .el-input {
    margin-left: 5px;
  }
}
</style>